<template>
    <div class="main-content">
        <levelbar></levelbar>
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="formInline" ref="formInline" label-width="70px">
                    <el-row :gutter="41">
                        <el-col :span="7">
                             <el-form-item label="学校名称" prop="schoolName">
                                <school v-model="formInline.schoolName" style="width:100%"
                                @change='schoolChange'></school>
                             </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="班级">
                                <el-select v-model="formInline.classes" placeholder="请选择班级" @change="classChange"
                                style="width:100%">
                                    <el-option v-for="(item,index) in classesArr" 
                                    :key="index" :label="item.sNickName" :value="item.pId"> 
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" :offset="7">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="submit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
             <div slot="table">
                <div class="table-title">
                    <span class="table-title-span">
                        <exportExcel :jsonStr='jsonStr'></exportExcel>
                    </span>
                </div> 
                <el-table :empty-text="emptyText"  border style="width: 100%" :data="AnnounceList" v-loading="loading"  @sort-change="sortChange">
                <el-table-column align="center" label="学校名称">
                     <template scope="scope">
                        <span>{{ scope.row.s_name ?scope.row.s_name:'--' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="班级名称" prop="sDesc">
                     <template scope="scope">
                        <span>{{ scope.row.s_nick_name ?scope.row.s_nick_name:'--' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" sortable="custom" label="学生人数" prop="sUpdateTime">
                     <template scope="scope">
                        <span>{{ scope.row.student_count}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="统计日期">
                     <template scope="scope">
                        <span>{{ scope.row.report_date ?scope.row.report_date:'--' }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" 
                :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
             </div>
        </echartsLayout>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import { mapState, mapActions, mapGetters } from 'vuex';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import trendChart from 'components/Charts/trendChart';
    import {queryTable, getClassList} from 'api/common';
    import school from 'components/SchoolClasss/school';
    import exportExcel from 'components/ExportExcel/index'; 
    export default{
        components: { echartsLayout, Levelbar, trendChart, school, exportExcel},
        data() {
            return {
                jsonStr: null,
                formState: false,
                dataListState: true,
                eCharts1State: false,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                formInline: {
                    schoolId: '',
                    classes: '',
                    schoolName: '',
                    className: ''
                },
                loading: true,
                AnnounceList: [],
                listQuery: {// 分页
                    page: 1,
                    total: 0
                },
                schoolArr: [],
                classesArr: [],
                flagType: true
            }
        },
        computed: {
            emptyText() {
                return this.listQuery.page == 1 ? '暂无数据' : '为保障流畅性，暂展示一万条数据，您可查询所需信息';
            },
            ...mapState({
                config: state => state.config.table
            }),
            ...mapGetters([
                'uid'
            ])
           
        },
        created() {
            this.searchFetchData()
        },
        methods: {
            // 全局获取行数
            ...mapActions(['ChangePageSize']),
             // 获取学校id
            schoolChange(val) {
                this.formInline.schoolId = val;
                this.formInline.classes='';
                this.classesArr=[];
                if (val) {
                    getClassList(val).then(res => {
                        this.classesArr=res.data.content;
                        this.classesArr.unshift({
                            pId: '', sNickName: '请选择'
                        })
                       
                    })
                }
            },
            // 学校改变时,得到班级名字
            classChange(val) {
                if (val) {
                    let classObj= this.classesArr.find(item => {
                        return item.pId==val
                    })
                    this.formInline.className=classObj.sNickName;
                } else {
                    this.formInline.className=''
                }
            },
          
            submit() {
                this.listQuery.page=1;
                this.searchFetchData();
            },
            searchFetchData() {
                this.loading = true;
                let page_index=this.listQuery.page,
                    page_size=this.config.pageSize,
                    query_id=8,
                    show_list=false, // true 返回表记录数据
                    type='event',
                    real_time=false;   // 分析类型 event user;
                let query={
                    order_field: 'student_count', // 排序
                    order_desc: this.flagType,
                    schoolName: this.formInline.schoolId,
                    className: this.formInline.className
                };
                this.jsonStr={
                    'page_index': this.listQuery.page,
                    'page_size': this.config.pageSize,
                    'query_id': 8, 
                    'show_list': false, 
                    'real_time': false,
                    'type': 'event',
                    'file_name': '班级用户统计', 
                    'field_names': [
                        ['学校名称', 's_name'],
                        ['班级名称', 's_nick_name'], 
                        ['学生人数', 'student_count'], 
                        ['统计日期', 'report_date']
                    ],
                    query
                };
                queryTable(query, query_id, page_index, page_size, show_list, type, real_time).then(res => {
                    this.loading = false;
                    this.AnnounceList = res.data.content.rows;
                    this.listQuery.total = res.data.content.total || res.data.content.total_rows;
                }).catch(() => {
                    this.loading = false;
                });
             
            },
            sortChange({ column, prop, order }) {
                this.flagType=order=='ascending'?false:true;
                this.searchFetchData()
            },
              // 分页
            handleSizeChange(val) {
                // console.log('分页了', val)
                this.listQuery.page = 1;
                this.loading = true;
                this.ChangePageSize(val);
                this.searchFetchData();
            },
            handleCurrentChange(val) {
                // console.log('改变当前页了', val)
                this.loading = true;
                this.listQuery.page = val;
                this.searchFetchData();
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
           position: relative;
        padding: 20px 20px 10px;
        width: 1400px;
        margin: 0 auto;
    }
</style>                     